<template>
	<view class="details-body">
		<view class="details-header">
			<image :src="courseInfo.img" mode="aspectFit" class="details-header_img"></video>
			<view class="details-header_text">
				<view>
					<view class="details-header_title text_black">{{courseInfo.title}} 训练计划</view>
					<view class="details-header_num text_opblack" v-if="courseInfo.studies">{{courseInfo.studies}}人已学习</view>
				</view>
				<view v-if="is_fav=='0'" @click="collectClick" >
					<image class="details-header_collect" src="../../static/imgs/home/littlebutton_no.png"></image>
				</view>
				<view v-else @click="nocollectClick">
					<image class="details-header_collect" src="../../static/imgs/home/littlebutton_yes.png"></image>
				</view>
			</view>
		</view>
		<view class="details-course-tips">
			<image src="../../static/imgs/home/tips.png"></image>
			<text class="text_active">温馨提示：</text>建议按以下指导顺序训练。</view>
		<view class="details-chapter" v-for="(item,index) in chaptersList" :key="index">
			<view class="details-chapter-title text_opblack">章节{{index+1}}: {{item.title=="训练计划"?'':item.title}}训练步骤</view>
			<view class="details-chapter-item" v-for="(citem,cindex) in item.dataInfo" :key="cindex" @click="classItem(item,cindex)">
				<view class="details-chapter-item_left">
					{{cindex+1}}
					<image src="../../static/imgs/home/play_icon.png" class="details-chapter-item_play"></image>
				</view>
				<view style="width: 100%;">
					<view class="details-chapter-item_title text_black">
					 <view>{{citem.lesson_title}}</view>
					 <image src="../../static/imgs/home/course-icon.png"></image>
					</view>
					<view class="details-chapter-item_tips text_opblack">
						<view>时长{{citem.video_time}}秒</view>
						<view>{{citem.studies}}人已学习</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getChapterList,collectByid} from "../../static/js/api/course.js";
	export default{
		data(){
			return{
				courseInfo:{},
				chaptersList:[],
				is_fav:0,
			}
		},
		onLoad(option) {
			if(option.courseInfo){
				this.courseInfo = JSON.parse(option.courseInfo)
				console.log(!this.courseInfo.title)
				if(this.courseInfo.course_title){
					this.courseInfo.title = this.courseInfo.course_title
					this.courseInfo.img = this.courseInfo.course_img
				}
				this.getData(this.courseInfo.course_id)
				uni.setNavigationBarTitle({
					title:this.courseInfo.title+" 训练计划"
				})
			}
			
		},
		methods:{
			getData(id){
				let _this = this
				getChapterList({
					course_id:id
				}).then(res=>{
					console.log(res)
					_this.is_fav = res.is_fav
					_this.chaptersList = []
					let arrData= res.chapters
					 arrData.forEach((item,index) => {
					 	const parent = _this.chaptersList.find(c => c.title=== item.title)
					 	if (parent) {
					 		parent.dataInfo.push(item)
					 	} else {
					 		const obj = {
								// chapterNum:num.toUpperCase(),
					 			title: item.title,
					            dataInfo: [item]
					        }
					        _this.chaptersList.push(obj)
					    }
					 })
				})
			},
			// 收藏
			collectClick(){
				collectByid({
					course_id:this.courseInfo.course_id,
					type:0
				}).then(res=>{
					// console.log(res)
					uni.showToast({
						title:'课程收藏成功',
						icon:"none"
					})
					this.getData(this.courseInfo.course_id)
				})
				
			},
			// 取消收藏
			nocollectClick(){
				collectByid({
					course_id:this.courseInfo.course_id,
					type:1
				}).then(res=>{
					// console.log(res)
					uni.showToast({
						title:'课程收藏成功',
						icon:"none"
					})
					this.getData(this.courseInfo.course_id)
				})
			},
			classItem(parent,cindex){
				parent.dataInfo[cindex]
				let params = {
					dataInfo:parent.dataInfo,
					// backLessonId:cindex==0?null:parent.dataInfo[cindex-1].lesson_id,
					// nextLessonId:cindex+1==parent.dataInfo.length?null:parent.dataInfo[cindex+1].lesson_id,
					lessonId:parent.dataInfo[cindex].lesson_id,
				}
				uni.navigateTo({
					url:"/pages/basicCourse/details?params="+JSON.stringify(params)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import url("./details.scss");
	.text_opblack{
		color: $uni-text-color-opblack;
	}
	.text_black{
		color: $uni-text-color-black;
	}
	.text_active{
		color: $uni-color-primary;
	}
	.text_green{
		color: $uni-color-success;
	}
	.details-chapter-item_title{
		display: flex;
		justify-content: space-between;
		image{
			width:72rpx;
			height: 38rpx;
			margin-right: 30rpx;
		}
	}
</style>